// JavaScript Document


var MASK_OPACITY = 0.9;
var TRANSITION_SPEED = "fast";
var sliderWidth = 0;
var unitWidth = 600;


$(document).ready(function(){
	$('.albumWrapper img').hover(function(){
		$('.cover', this).stop().animate({top:'80px'}, {queue:false, duration:160});
		//$('.cover', this).stop().animate({top:'250px'}, {gueue:false, duration:160});
		//alert('hi');									 
	});
	
	//HIDE THE MAIN PAGE
	//$('#mainGallery').hide();
	
	//HIDE THE GALLERY PAGE
	$('.albumGallery').hide();
	
	//add a div with id "mask"
	$("body").append('<div id="mask"></div>');
	
	//create a click function for <h4> and resize the mask, fade in and show the div content
	$(".lgImg").click(function (){
		//set the mask width and height to fit the screen width and height
		var screenW = $(window).width();
		var screenH = $(window).height();
		//alert(screenH);
		
		$("#mask").width(screenW);
		$("#mask").height(screenH);

		$("#mask").fadeTo(TRANSITION_SPEED, MASK_OPACITY);	
		$(".modal div ").fadeIn(TRANSITION_SPEED);
		
		$(".modal").css('top', screenH*.5 - $("#modalTest").height() *.5);
        $(".modal").css('left', screenW*.5 -$("#modalTest").width() * .5);
		

	});
	
	$("#mask").click(function(){
		$(this).fadeOut(TRANSITION_SPEED);
		$(".modal div").fadeOut(TRANSITION_SPEED);	
	});
	
	//THUMBNAIL SLIDER
	
	
	
	
});